<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>模块增加页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <script src="/res/js/jquery.js"></script>
    <script src="/res/js/tools.js"></script>

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>员工信息维护</legend>
</fieldset>
<form class="layui-form" action="" lay-filter="example" id="myform">
    <input type="hidden" name="staffId" id="staffId"><!-- 加一个隐藏主键 -->
    <input type="hidden" name="staffPhoto" id="staffPhoto">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" id="staffName" lay-verify="required" placeholder="请输入员工姓名"
                   autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <input type="text" name="staffSex" id="staffSex" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input type="text" name="staffBirthday_" id="staffBirthday_" lay-verify="staffBirthday_"
                       placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="staffTel" id="staffTel" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">照片</label>
        <div class="layui-input-inline">
            <input type="file" name="staffPhoto_" id="staffPhoto_" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="staffRemark" id="staffRemark" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffUsername" id="staffUsername" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="staffPwd" id="staffPwd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">住址</label>
        <div class="layui-input-inline">
            <input type="text" name="staffAddress" id="staffAddress" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">工资</label>
        <div class="layui-input-inline">
            <input type="text" name="staffSlary" id="staffSlary" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择角色</label>
        <div class="layui-input-block" id="staRemark">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="tijiao">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="close_btn">关闭</button>
        </div>
    </div>
</form>


<script src="/res/layui/layui.js"></script>


<script>

    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {


        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.$;

        //日期
        laydate.render({
            elem: '#staffBirthday_'
        });

        /**
         * 设置下拉框
         */
        $.ajax({
            url: "/logisticsStaff/yaoDate",
            dataType: 'json',
            type: 'POST',
            async: false,
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (resp) {
                if (resp.state == 1) {
                    for (let i = 0; i < resp.data.length; i++) {
                        $("#staRemark").append("<input type='checkbox' name='suserRoleId' value='" + resp.data[i].roleId + "' title='" + resp.data[i].roleName + "'>")
                    }
                    form.render();
                }
            },
            error: function (response) {
                console.log(response);
            }
        });
        form.on('submit(tijiao)', function (data) {
            let url = "/logisticsStaff/addAndUpdate";
            let formData = new FormData(document.getElementById("myform"));
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'POST',
                async: true,
                data: formData,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (resp) {
                    console.log(resp);
                    if (resp.state == 1) {
                        // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        // parent.layer.close(index); //再执行关闭
                        parent.layer.close(parent.layer.index);
                        parent.table.reload('dataLXList');
                    }
                },
                error: function (response) {
                    console.log(response);
                }
            });
            return false;
        });

        /**
         * 关闭
         */
        $("#close_btn").on("click", function () {
            //注意：parent 是 JS 自带的全局对象，可用于操作父页面
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        });

        /**
         * 得到地址上得值
         * @param id
         * @returns {string|null}
         */
        function getQueryString(id) {
            var reg = new RegExp("(^|&)" + id + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
            console.info(r);
        }

        /*
        * 当点击编辑按钮时,会传入一个id到form.html页面
        * */
        let id = getQueryString("id");
        //如果id有值
        if (id) {
            let url = "/logisticsStaff/show";
            let data_ = {staffId: id};
            $.post(url, data_, function (resp) {
                if (resp.state == 1) {
                    form.val('example', resp.data.data1);
                    $("#staffBirthday_").val(resp.data.data1.staffBirthday);

                    for (let i = 0; i < resp.data.data2.length; i++) {
                        $("input:checkbox[value='" + resp.data.data2[i].roleId + "']").prop("checked", true);
                    }
                    //重新渲染
                    form.render();
                }
            }, "json");
        }


    });
</script>
</body>
</html>